<template>
  <section class="vh-100">
    <div class="d-flex align-items-center h-100 gradient-1">
      <div class="container h-100">
        <div class="row d-flex justify-content-center align-items-center h-100">
          <div class="col-12 col-md-9 col-lg-7 col-xl-4">
            <div class="card" style="border-radius: 15px">
              <div class="card-body p-5">
                <h2 class="text-center mb-5">注册</h2>
                <form @submit.prevent="register">
                  <div class="form-outline mb-4">
                    <input v-model="username" type="text" id="username" class="form-control form-control-lg"/>
                    <label class="form-label" for="username">用户名</label>
                  </div>
                  <div class="form-outline mb-4">
                    <input v-model="password" type="password" id="password" class="form-control form-control-lg"/>
                    <label class="form-label" for="password">密码</label>
                  </div>
                  <div class="form-outline mb-4">
                    <input v-model="password_confirm" type="password" id="password" class="form-control form-control-lg"/>
                    <label class="form-label" for="password">确认密码</label>
                  </div>
                  <div class="d-flex justify-content-center">
                    <button type="submit" class="btn btn-success btn-block btn-lg gradient-2">
                      注册
                    </button>
                  </div>
                  <div class="error_message">{{error_message}}</div>
                  <p class="text-center text-muted mt-3">
                    已经有账号了？
                    <router-link :to="{name: 'user_login'}" class="fw-bold text-body">
                      <u>去登录</u>
                    </router-link>
                  </p>
                </form>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </section>
</template>

<script>
import {ref} from 'vue';
export default {
  setup(){
    let username = ref("");
    let password = ref("");
    let password_confirm = ref("");
    let error_message = ref("");

    const register = () => {
      console.log(username.value, password.value, password_confirm.value);
    }

    return {
      username,
      password,
      password_confirm,
      error_message,
      register,
    }
  }
}
</script>

<style scoped>
.error_message {
  color: red;
}

.gradient-1 {
  background-image: linear-gradient(to right, rgba(132, 250, 176, 0.5), rgba(143, 211, 244, 0.5));
}

.gradient-2 {
  background-image: linear-gradient(to right, rgba(132, 250, 176, 1), rgba(143, 211, 244, 1));
  transition: background-image 0.3s ease; /* 添加过渡效果 */
}

.gradient-2:hover {
  background-image: linear-gradient(to right, rgba(100, 220, 150, 1), rgba(120, 190, 220, 1)); /* 颜色变深的渐变 */
}

</style>